<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>扫码</title>
  <script src="./yao.js"></script>
  <script src="./jquery.js"></script>
  <script type="text/javascript" src="./message.js"></script>
</head>

<style>
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: #a2a5b9;
  }
</style>
<link rel="stylesheet" href="./css/add.css" />
<script>
  // WebSocket 数据更新
  $(function () {
    Start(
      null,
      function onEnter(data) {
        SetUser(data);
      },
      function onLeave(data) {
        SetUser(data);
      }
    );
  });
</script>

<body style="margin: 0; background-color: #3b3b41">
  <div id="body">
    <div class="bar_0">
      <svg viewBox="64 64 896 896" focusable="false" data-icon="menu-unfold" width="1em" height="1em"
        fill="currentColor" aria-hidden="true">
        <path
          d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 000-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0014.4 7z">
        </path>
      </svg>
      <span class="title">扫码</span>
    </div>

    <div class="bar_1">
      <span>扫码 / 添加单品</span>
    </div>

    <div class="bar_2">
      <span class="bar_2_title">扫码完成后点击保存按钮将数据录入系统</span>
      <div class="bar_1_div3">
        <button id="save_all">保存</button>
      </div>
    </div>
    <div class="bar_3">
      <div class="bar_3_top">
        <div class="bar_1_div">
          <span>编码：</span>
          <input id="inp_code" name="sn" class="inp_1" placeholder="输入编码" />
        </div>

        <div class="bar_1_div2">
          <span>操作：</span>
          <select class="bar_1_select" id="select_status">
            <option class="opt" value="进入">入库</option>
            <option class="opt" value="离开">出库</option>
          </select>
        </div>

        <div class="bar_1_div2">
          <span>人员：</span>
          <select name="user_id" class="bar_1_select bar_2_select" id="user_select">
            <option value="正常">测试1</option>
            <option value="不足">测试2</option>
          </select>
        </div>
        <div class="bar_1_div2">
          <div class="bar_1_div4">
            <!-- <button onclick="Adds()">新增一条</button> -->
          </div>
        </div>
      </div>

      <!--商品渲染开始-->
      <div id="total_product" class="bar_3_div6">
        <!-- <div class="bar_3_div5">
            <img src="./img/jaiodai.jpg" width="100%" height="180px" />
            <span class="dels"
              ><svg
                t="1663664726540"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1561"
                width="28"
                height="28"
              >
                <path
                  d="M827.392 195.584q65.536 65.536 97.792 147.456t32.256 167.936-32.256 167.936-97.792 147.456-147.456 98.304-167.936 32.768-168.448-32.768-147.968-98.304-98.304-147.456-32.768-167.936 32.768-167.936 98.304-147.456 147.968-97.792 168.448-32.256 167.936 32.256 147.456 97.792zM720.896 715.776q21.504-21.504 18.944-49.152t-24.064-49.152l-107.52-107.52 107.52-107.52q21.504-21.504 24.064-49.152t-18.944-49.152-51.712-21.504-51.712 21.504l-107.52 106.496-104.448-104.448q-21.504-20.48-49.152-23.04t-49.152 17.92q-21.504 21.504-21.504 52.224t21.504 52.224l104.448 104.448-104.448 104.448q-21.504 21.504-21.504 51.712t21.504 51.712 49.152 18.944 49.152-24.064l104.448-104.448 107.52 107.52q21.504 21.504 51.712 21.504t51.712-21.504z"
                  p-id="1562"
                  fill="#2c2c2c"
                ></path></svg></span>

            <p class="bar_3_div6_p">标签: <span>10000001</span></p>

            <p class="bar_3_div6_p">单位: <span>个</span></p>

            <p class="bar_3_div6_p">物资名称: <span>梯子</span></p>

            <p class="bar_3_div6_p">规格型号: <span>高度: 450</span></p>
          </div> -->
        <!-- <div class="bar_3_div5">
          <img src="./img/jaiodai.jpg" width="100%" height="180px" />
          <p class="bar_3_div6_p">标签: <span>10000001</span></p>

          <p class="bar_3_div6_p">单位: <span>个</span></p>

          <p class="bar_3_div6_p">物资名称: <span>梯子</span></p>

          <p class="bar_3_div6_p">规格型号: <span>高度: 450</span></p>
        </div>
        <div class="bar_3_div5">
          <img src="./img/jaiodai.jpg" width="100%" height="180px" />
          <p class="bar_3_div6_p">标签: <span>10000001</span></p>

          <p class="bar_3_div6_p">单位: <span>个</span></p>

          <p class="bar_3_div6_p">物资名称: <span>梯子</span></p>

          <p class="bar_3_div6_p">规格型号: <span>高度: 450</span></p>
        </div>
        <div class="bar_3_div5">
          <img src="./img/jaiodai.jpg" width="100%" height="180px" />
          <p class="bar_3_div6_p">标签: <span>10000001</span></p>

          <p class="bar_3_div6_p">单位: <span>个</span></p>

          <p class="bar_3_div6_p">物资名称: <span>梯子</span></p>

          <p class="bar_3_div6_p">规格型号: <span>高度: 450</span></p>
        </div>
        <div class="bar_3_div5">
          <img src="./img/jaiodai.jpg" width="100%" height="180px" />
          <p class="bar_3_div6_p">标签: <span>10000001</span></p>

          <p class="bar_3_div6_p">单位: <span>个</span></p>

          <p class="bar_3_div6_p">物资名称: <span>梯子</span></p>

          <p class="bar_3_div6_p">规格型号: <span>高度: 450</span></p>
        </div>
        <div class="bar_3_div5">
          <img src="./img/jaiodai.jpg" width="100%" height="180px" />
          <p class="bar_3_div6_p">标签: <span>10000001</span></p>

          <p class="bar_3_div6_p">单位: <span>个</span></p>

          <p class="bar_3_div6_p">物资名称: <span>梯子</span></p>

          <p class="bar_3_div6_p">规格型号: <span>高度: 450</span></p>
        </div>
        <div class="bar_3_div5">
          <img src="./img/jaiodai.jpg" width="100%" height="180px" />
          <p class="bar_3_div6_p">标签: <span>10000001</span></p>

          <p class="bar_3_div6_p">单位: <span>个</span></p>

          <p class="bar_3_div6_p">物资名称: <span>梯子</span></p>

          <p class="bar_3_div6_p">规格型号: <span>高度: 450</span></p>
        </div>
        <div class="bar_3_div5">
          <img src="./img/jaiodai.jpg" width="100%" height="180px" />
          <p class="bar_3_div6_p">标签: <span>10000001</span></p>

          <p class="bar_3_div6_p">单位: <span>个</span></p>

          <p class="bar_3_div6_p">物资名称: <span>梯子</span></p>

          <p class="bar_3_div6_p">规格型号: <span>高度: 450</span></p>
        </div> -->
      </div>
    </div>
  </div>
  <!--弹窗开始-->
  <div id="web_alert" class="web_notice">
    <div class="web_notice_div1">
      <h3 class="web_notice_h3">操作成功!</h3>
      <p class="alert_text" id="alert_text">&nbsp;</p>
      <span id="confirm_alt"><a class="web_notice_a" onclick="confirmAlert()">确认</a>
      </span>
    </div>
  </div>

  <!--弹窗结束-->
</body>
<script>
  const yao = new Yao();
  function print(data) {
    document.querySelector("#output").value = JSON.stringify(data);
  }
  function SetUser(data) {
    console.log("进入到setuser");
    console.log(data);
    var user = data.payload.user.id;
    console.log(user);
    if (user > 0) {
      GetUserRender(user);
    }
  }

  $(document).ready(function () {
    var resp = GetUser();
  });
  // 获取用户下拉接口
  async function GetUser() {
    var resp = await yao.Get("/user/all");
    var ops = ""; //` <option selected = "selected" disabled="disabled" >请选择</option>`;
    for (var i in resp) {
      ops = ops + ` <option value=${resp[i].id}>${resp[i].name}</option>`;
    }
    //console.log(ops);
    $("#user_select").html(ops);
    return resp;
  }
  // user render
  async function GetUserRender(id) {
    var resp = await yao.Get("/user/all");
    var ops = ""; //` <option selected = "selected" disabled="disabled" >请选择</option>`;
    for (var i in resp) {
      if (resp[i].id == id) {
        ops =
          ops +
          ` <option selected="selected" value=${resp[i].id}>${resp[i].name}</option>`;
      } else {
        ops = ops + ` <option value=${resp[i].id}>${resp[i].name}</option>`;
      }
      // ops = ops + ` <option value=${resp[i].id}>${resp[i].name}</option>`;
    }
    console.log(ops);
    $("#user_select").html(ops);
    return resp;
  }

  const temp_arr = [];
  async function GetSku(code) {
    //  const resp = await yao.Post("/product/save", { data: data });
    var resp = await yao.Post("/product/find", {
      code: code,
      data: temp_arr,
    });
    if (resp == "") {
      alert("商品不存在")
    }
    if (resp == 1) {
      $(".bar_2_title").html("编码重复").css("color", "#ed232e");
      //clearInterval(time); //清除之前的定时器
      time = setInterval(function () {
        //初始化现在的定时器
        $(".bar_2_title")
          .html("扫码完成后点击保存按钮将数据录入系统")
          .css("color", "");
      }, 5000);
    }
    if (resp.id) {
      var params = {};
      params.status = $("#select_status").val();
      params.code = code;
      params.user_id = $("#user_select").val();
      resp.params = params;

      temp_arr.push(resp);
      var numbers = temp_arr.length;

      var all = $("#total_product").html();
      // <img src="${resp.material.icon[0]}" width="100%" height="180px" />

      if (numbers % 4 == 1) {
        all =
          all +
          ` <div class="bar_3_div5 bar_3_div5_first" data-index="${numbers - 1
          }">
            <img src="${resp.material.icon}"  />
            <div class="dels" onclick="Dels(${numbers - 1},this)">
           <svg
                t="1663664726540"
              
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1561"
                width="28"
                height="28"
              >
                <path
                  d="M827.392 195.584q65.536 65.536 97.792 147.456t32.256 167.936-32.256 167.936-97.792 147.456-147.456 98.304-167.936 32.768-168.448-32.768-147.968-98.304-98.304-147.456-32.768-167.936 32.768-167.936 98.304-147.456 147.968-97.792 168.448-32.256 167.936 32.256 147.456 97.792zM720.896 715.776q21.504-21.504 18.944-49.152t-24.064-49.152l-107.52-107.52 107.52-107.52q21.504-21.504 24.064-49.152t-18.944-49.152-51.712-21.504-51.712 21.504l-107.52 106.496-104.448-104.448q-21.504-20.48-49.152-23.04t-49.152 17.92q-21.504 21.504-21.504 52.224t21.504 52.224l104.448 104.448-104.448 104.448q-21.504 21.504-21.504 51.712t21.504 51.712 49.152 18.944 49.152-24.064l104.448-104.448 107.52 107.52q21.504 21.504 51.712 21.504t51.712-21.504z"
                  p-id="1562"
                  fill="#2c2c2c"
                ></path></svg>
              </div>
          <p class="bar_3_div6_p">标签: <span>${resp.sku_sn}</span></p>

          <p class="bar_3_div6_p">单位: <span>${resp.unit}</span></p>

          <p class="bar_3_div6_p">物资名称: <span>${resp.material.name
          }</span></p>

          <p class="bar_3_div6_p">规格型号: <span>高度：${resp.specs["高度"]
          }</span></p>
          
        </div>
        `;
      } else {
        all =
          all +
          ` <div class="bar_3_div5" data-index="${numbers - 1}">
            <img src="${resp.material.icon}"  />
            <div class="dels" onclick="Dels(${numbers - 1},this)" >
           <svg
                t="1663664726540"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1561"
                width="28"
                height="28"
              >
                <path
                  d="M827.392 195.584q65.536 65.536 97.792 147.456t32.256 167.936-32.256 167.936-97.792 147.456-147.456 98.304-167.936 32.768-168.448-32.768-147.968-98.304-98.304-147.456-32.768-167.936 32.768-167.936 98.304-147.456 147.968-97.792 168.448-32.256 167.936 32.256 147.456 97.792zM720.896 715.776q21.504-21.504 18.944-49.152t-24.064-49.152l-107.52-107.52 107.52-107.52q21.504-21.504 24.064-49.152t-18.944-49.152-51.712-21.504-51.712 21.504l-107.52 106.496-104.448-104.448q-21.504-20.48-49.152-23.04t-49.152 17.92q-21.504 21.504-21.504 52.224t21.504 52.224l104.448 104.448-104.448 104.448q-21.504 21.504-21.504 51.712t21.504 51.712 49.152 18.944 49.152-24.064l104.448-104.448 107.52 107.52q21.504 21.504 51.712 21.504t51.712-21.504z"
                  p-id="1562"
                  fill="#2c2c2c"
                ></path></svg>
                </div>
          <p class="bar_3_div6_p">标签: <span>${resp.sku_sn}</span></p>

          <p class="bar_3_div6_p">单位: <span>${resp.unit}</span></p>

          <p class="bar_3_div6_p">物资名称: <span>${resp.material.name
          }</span></p>

          <p class="bar_3_div6_p">规格型号: <span>高度：${resp.specs["高度"]
          }</span></p>
        </div>
        `;
      }

      $("#total_product").html(all);
      //console.log(temp_arr);
    }

    return resp;
  }
  $(document).keydown(function (event) {
    if (event.keyCode == 13) {
      var code = $("#inp_code").val();
      var data = GetSku(code);
      //console.log(data);
      $("#inp_code").val("");
    }
  });

  // 点击回车然后去请求查询单品的接口
  // $("#inp_code").keyup(function () {
  //   if (event.keyCode == 13) {
  //   }
  // });

  // $("#inp_code").keydown(function () {
  //   if (event.keyCode == 13) {
  //     var code = $("#inp_code").val();
  //     var data = GetSku(code);
  //     console.log(data);
  //     $("#inp_code").val("");
  //   }
  // });


  $("#save_all").click(function () {
    var params = {};
    params.status = $("#select_status").val();
    params.code = $("#inp_code").val();
    params.user_id = $("#user_select").val();
    params.data = temp_arr;
    //console.log(params);
    PostALL(params);
  });
  function confirmAlert() {
    document.querySelector(".web_notice").remove();
    location.reload(true);
  }
  function confirmAlert2() {
    // document.querySelector(".web_notice").remove();
    // $("#body").css("filter", "");
    // location.reload(true);
    $("#web_alert").css("display", "none");
    $("#body").css("filter", "");
  }

  async function PostALL(data) {
    const resp = await yao.Post("/product/save", { data: data });
    if (resp.code == 200) {
      $("#web_alert").css("display", "block");
      $("#body").css("filter", "blur(20px)");
      $("#alert_text").html(resp.message);
      $("#confirm_alt").html(
        `<a class="web_notice_a" onclick="confirmAlert()">确认</a>`
      );
    } else {
      $(".web_notice_h3").html("操作失败!");
      $("#alert_text").html(resp.message);
      $("#web_alert").css("display", "block");
      $("#body").css("filter", "blur(20px)");
      $("#confirm_alt").html(
        `<a class="web_notice_a" onclick="confirmAlert2()">确认</a>`
      );
    }
  }
  function Dels(index, obj) {
    var ht = $(obj).closest(".bar_3_div5");

    ht.remove();

    //remove
    temp_arr.splice(index, 1);

    var numbers = temp_arr.length;

    var all = ""; // $("#total_product").html();
    var j = 1;
    for (var i in temp_arr) {
      // console.log("进入for循环");

      // <img src="${resp.material.icon[0]}" width="100%" height="180px" />

      if (j % 4 == 1) {
        all =
          all +
          ` <div class="bar_3_div5 bar_3_div5_first" data-index="${i}">
    <img src="${temp_arr[i].material.icon}"  />
    <div class="dels" onclick="Dels(${i},this)">
   <svg
        t="1663664726540"
      
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1561"
        width="28"
        height="28"
      >
        <path
          d="M827.392 195.584q65.536 65.536 97.792 147.456t32.256 167.936-32.256 167.936-97.792 147.456-147.456 98.304-167.936 32.768-168.448-32.768-147.968-98.304-98.304-147.456-32.768-167.936 32.768-167.936 98.304-147.456 147.968-97.792 168.448-32.256 167.936 32.256 147.456 97.792zM720.896 715.776q21.504-21.504 18.944-49.152t-24.064-49.152l-107.52-107.52 107.52-107.52q21.504-21.504 24.064-49.152t-18.944-49.152-51.712-21.504-51.712 21.504l-107.52 106.496-104.448-104.448q-21.504-20.48-49.152-23.04t-49.152 17.92q-21.504 21.504-21.504 52.224t21.504 52.224l104.448 104.448-104.448 104.448q-21.504 21.504-21.504 51.712t21.504 51.712 49.152 18.944 49.152-24.064l104.448-104.448 107.52 107.52q21.504 21.504 51.712 21.504t51.712-21.504z"
          p-id="1562"
          fill="#2c2c2c"
        ></path></svg>
      </div>
  <p class="bar_3_div6_p">标签: <span>${temp_arr[i].sku_sn}</span></p>

  <p class="bar_3_div6_p">单位: <span>${temp_arr[i].unit}</span></p>

  <p class="bar_3_div6_p">物资名称: <span>${temp_arr[i].material.name}</span></p>

  <p class="bar_3_div6_p">规格型号: <span>高度：${temp_arr[i].specs["高度"]}</span></p>
  
</div>
`;
      } else {
        all =
          all +
          ` <div class="bar_3_div5" data-index="${i}">
    <img src="${temp_arr[i].material.icon}"  />
    <div class="dels" onclick="Dels(${i},this)" >
   <svg
        t="1663664726540"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1561"
        width="28"
        height="28"
      >
        <path
          d="M827.392 195.584q65.536 65.536 97.792 147.456t32.256 167.936-32.256 167.936-97.792 147.456-147.456 98.304-167.936 32.768-168.448-32.768-147.968-98.304-98.304-147.456-32.768-167.936 32.768-167.936 98.304-147.456 147.968-97.792 168.448-32.256 167.936 32.256 147.456 97.792zM720.896 715.776q21.504-21.504 18.944-49.152t-24.064-49.152l-107.52-107.52 107.52-107.52q21.504-21.504 24.064-49.152t-18.944-49.152-51.712-21.504-51.712 21.504l-107.52 106.496-104.448-104.448q-21.504-20.48-49.152-23.04t-49.152 17.92q-21.504 21.504-21.504 52.224t21.504 52.224l104.448 104.448-104.448 104.448q-21.504 21.504-21.504 51.712t21.504 51.712 49.152 18.944 49.152-24.064l104.448-104.448 107.52 107.52q21.504 21.504 51.712 21.504t51.712-21.504z"
          p-id="1562"
          fill="#2c2c2c"
        ></path></svg>
        </div>
  <p class="bar_3_div6_p">标签: <span>${temp_arr[i].sku_sn}</span></p>

  <p class="bar_3_div6_p">单位: <span>${temp_arr[i].unit}</span></p>

  <p class="bar_3_div6_p">物资名称: <span>${temp_arr[i].material.name}</span></p>

  <p class="bar_3_div6_p">规格型号: <span>高度：${temp_arr[i].specs["高度"]}</span></p>
</div>
`;
      }
      j++;
    }

    $("#total_product").html(all);
  }
</script>

</html>